<template>
  <view class="container">
    <!-- 头像 -->
    <view class="user-avatar">
      <image :src="'data:image/jpeg;base64,' + base64" class="avatar" mode="aspectFill" />
    </view>

    <!-- 背景 -->
    <view class="bg">
      <view class="color-strip">
        <view class="color-strip-title" :style="{ left: getIndicatorPosition() }">{{ getSkinColorText() }}</view>
        <view class="color-strip-content">
          <view class="color-item-text">肤色</view>
          <view class="color-item item-1" style="background-color: #EEE3DD;"></view>
          <view class="color-item" style="background-color: #DDC7BA;"></view>
          <view class="color-item" style="background-color: #CCAB98;"></view>
          <view class="color-item" style="background-color: #BB8F76;"></view>
          <view class="color-item" style="background-color: #AA7355;"></view>
          <view class="color-item" style="background-color: #895D44;"></view>
        </view>
      </view>
    </view>

    <!-- 皮肤分析 -->
    <view class="skin-analysis">
      <view class="skin-type-tag">
        <image :src="images.icons.skinTitleBg" class="skin-type-bg" />
        <view class="skin-type-text">
          {{ skinResult?.resultClassification }}
        </view>
      </view>

      <view class="analysis-section">
        <view class="section-title">
          <image :src="images.icons.skinWenhao" class="question-icon" />
          <text>问题分析</text>
        </view>
        <view class="analysis-content">
          <view class="analysis-list">
            <text>{{ skinResult.problemAnalysis }}</text>
          </view>
        </view>
      </view>

      <view class="solution-section">
        <view class="section-title">
          <image :src="images.icons.skinLightIcon" class="solution-icon" />
          <text>解决方案</text>
        </view>
        <view class="solution-content">
          <view class="solution-items">
            <view class="solution-item">
              <image :src="images.icons.iconC1" class="item-icon" />
            </view>
            <view class="solution-item">
              <image :src="images.icons.iconC2" class="item-icon" />
            </view>
            <view class="solution-item">
              <image :src="images.icons.iconC3" class="item-icon" />
            </view>
          </view>
          <view class="solution-text">
            <view class="solution-list">
              <text>{{ skinResult.improvementSuggestions }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DEFAULT_IMAGE, images } from '@/config/images';

const props = defineProps({
  result: {
    type: Object,
    default: () => ({})
  },
  base64: {
    type: String,
    default: ''
  }
});

const skinResult = ref(uni.getStorageSync('cnResult').skinColor)

const getSkinColorText = () => {
  switch (props.result?.value) {
    case 0: return '透白';
    case 1: return '白皙';
    case 2: return '自然';
    case 3: return '小麦';
    case 4: return '黝黑';
    default: return '黝黑';
  }
}

const getIndicatorPosition = () => {
  const value = props.result?.value || 0;
  // 计算位置百分比（考虑到文字宽度，左侧预留90rpx的肤色文字宽度）
  const baseWidth = 90; // 肤色文字宽度
  const totalWidth = 706 - baseWidth; // 总宽度减去文字宽度
  const itemWidth = totalWidth / 6; // 每个颜色块的宽度
  const position = baseWidth + value * itemWidth + itemWidth / 2 - 40; // 40是标题文字的一半宽度
  return position + 'rpx';
}
</script>


<style lang="scss" scoped>
.container {
  width: 100vw;
  background: #F3F3FD;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  overflow: hidden;

  .user-avatar {
    width: 384rpx;
    height: 384rpx;
    margin: 27rpx auto 0;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
  }

  .bg {
    width: 706rpx;
    height: 359rpx;
    background: linear-gradient(180deg, rgba(105, 105, 255, 0.2), rgba(105, 105, 255, 0));
    border-radius: 37rpx;
    position: absolute;
    top: 210rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;

    .color-strip {
      width: 100%;
      height: 80rpx;
      margin-top: 238rpx;
      position: relative;
      display: flex;
    justify-content: center;
    align-items: flex-end;

      .color-strip-title {
        position: absolute;
        top: -30rpx;
        background-color: #435EEE;
        color: #FFFFFF;
        font-size: 28rpx;
        padding: 8rpx 24rpx;
        border-radius: 24rpx;
        transition: left 0.3s ease;
        &::after {
          content: '';
          position: absolute;
          bottom: -12rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;
          border-right: 8rpx solid transparent;
          border-top: 12rpx solid #435EEE;
        }
      }

      .color-strip-content {
        display: flex;
        align-items: center;
      }

      .color-item-text {
        width: 90rpx;
        height: 32rpx;
        font-size: 28rpx;
        color: #333333;
      }

      .color-item {
        flex: 1;
        width: 90rpx;
        height: 32rpx;
        margin-right: 3rpx;


        &:last-child {
          margin-right: 0;
          border-top-right-radius: 16rpx;
          border-bottom-right-radius: 16rpx;
        }
      }

      .item-1 {
        border-top-left-radius: 16rpx;
        border-bottom-left-radius: 16rpx;
      }
    }
  }
}

.skin-analysis {
  width: 706rpx;
  background: #FFFFFF;
  border-radius: 37rpx;
  margin: 187rpx auto 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .skin-type-tag {
    padding: 0 20rpx;
    height: 74rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: -9rpx;
    margin-top: -21rpx;
    font-weight: bold;
    font-size: 34rpx;
    color: #FFFFFF;

    .skin-type-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
    }

    .skin-type-text {
      z-index: 9;
      margin-top: -14rpx;
    }
  }

  .analysis-section,
  .solution-section {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 32rpx;

    .section-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      image {
        width: 33rpx;
        height: 33rpx;
        margin-right: 12rpx;
      }

      text {
        font-weight: bold;
        font-size: 30rpx;
        color: #222222;
      }
    }
  }

  .solution-section{
    margin-bottom: 60rpx;
  }


  .analysis-content,
  .solution-content {
    color: #666666;
    font-size: 28rpx;
    line-height: 1.6;
    margin-top: 24rpx;

    .analysis-list,
    .solution-list {
      margin-top: 16rpx;

      text {
        display: block;
        margin-bottom: 16rpx;
      }
    }
  }

  .solution-items {
    display: flex;
    justify-content: space-around;
    margin: 32rpx 0;

    .solution-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 107rpx;
        height: 107rpx;
      }

      text {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}
</style>